<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    info: { type: Object, required: true },
  },
});
</script>

<template>
  <view class="order-base">
    <view style="display: flex; align-items: center">
      <view class="order-base-type">
        {{
          info.order_list_type === 1
            ? "商品"
            : info.order_list_type === 2
            ? "线下课程"
            : info.order_list_type === 3
            ? "课程"
            : info.order_list_type === 5
            ? "人工讲解"
            : info.order_list_type === 6
            ? "文博讲解"
            : "直播课"
        }}
      </view>
      <view class="order-base-time">{{ info.cdate }}</view>
      <view
        class="order-base-state"
        :style="{
          color: info.pay_status === 0 ? '#ff4d4f' : '#999999',
        }"
      >
        {{
          info.pay_status === 0
            ? "待付款"
            : info.pay_status === 1
            ? info.order_list_type === 3
              ? info.has_groupon === 1
                ? "已开课"
                : "已付款等待开课"
              : "已付款"
            : info.pay_status === 3
            ? "已退款"
            : "超时未支付"
        }}
      </view>
    </view>

    <view class="order-base-content">
      <image
        class="order-base-img"
        :src="
          info.cover_pic ||
          info.horizontal_pic ||
          info.pic_url ||
          info.cover_img
        "
        mode="aspectFill"
      />
      <view style="flex-grow: 1; min-width: 0">
        <view style="display: flex; align-items: flex-start">
          <view class="order-base-name">
            {{ info.product_name || info.title || info.obj_names }}
          </view>
          <view style="flex-shrink: 0">
            <view class="order-base-price">
              <text class="order-base-price2">￥</text>
              {{ info.pay_price || info.price }}
            </view>
            <view
              class="order-base-num"
              v-if="
                info.order_list_type === 1 ||
                info.order_list_type === 5 ||
                info.order_list_type === 6
              "
            >
              x{{ info.order_num }}
            </view>
          </view>
        </view>
        <view class="order-base-desc">
          {{
            info.specs ||
            info.product_type ||
            (info.end_date || info.valid_end_date
              ? `有效期：${info.end_date || info.valid_end_date}`
              : "")
          }}
        </view>
      </view>
    </view>

    <slot />
  </view>
</template>

<style lang="scss">
.order-base {
  padding-top: 20rpx;
  border-radius: 20rpx;
  background-color: #ffffff;

  .order-base-type {
    flex-shrink: 0;
    padding: 0 10rpx;
    margin-left: 20rpx;
    font-size: 24rpx;
    color: #999999;
    line-height: 30rpx;
    border-radius: 10rpx;
    border: 2rpx solid #cccccc;
  }

  .order-base-time {
    flex-grow: 1;
    min-width: 0;
    padding-left: 20rpx;
    font-size: 24rpx;
    color: #999999;
    line-height: 40rpx;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .order-base-state {
    flex-shrink: 0;
    padding-right: 20rpx;
    font-size: 28rpx;
    line-height: 40rpx;
  }

  .order-base-content {
    display: flex;
    align-items: flex-start;
    padding: 20rpx 20rpx 30rpx;
  }

  .order-base-img {
    flex-shrink: 0;
    width: 180rpx;
    height: 136rpx;
    margin-right: 20rpx;
    border-radius: 20rpx;
  }

  .order-base-name {
    flex-grow: 1;
    min-width: 0;
    height: 80rpx;
    margin-right: 20rpx;
    font-size: 28rpx;
    color: #333333;
    line-height: 40rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .order-base-price {
    font-size: 36rpx;
    color: #333333;
    line-height: 50rpx;
    font-weight: bold;
    text-align: right;
  }

  .order-base-price2 {
    font-size: 28rpx;
    line-height: 40rpx;
  }

  .order-base-num {
    font-size: 28rpx;
    color: #666666;
    line-height: 28rpx;
    text-align: right;
  }

  .order-base-desc {
    max-height: 68rpx;
    margin-top: 10rpx;
    font-size: 24rpx;
    color: #999999;
    line-height: 34rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
</style>